<template>
  <a-layout style="height: 100vh; background: #f5f5f5">
    <!-- 修改背景色 -->
    <a-layout-sider
      v-model:collapsed="collapsed"
      :trigger="null"
      collapsible
      width="200px"
      theme="light"
    >
      <div class="logo" />
      <!-- <Menu :menuList="menuList" /> -->
      <a-menu
        theme="light"
        mode="inline"
        :selected-keys="selectedKeys"
        @select="handleSelect"
      >
        <!-- <a-menu-item v-for="item in menuList" :key="item.path">
          <component :is="item.icon"></component>
          <RouterLink :to="item.path">{{ item.title }}</RouterLink>
        </a-menu-item> -->
        <Menu :menuList="menuList" />
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header
        style="
          background: #fff;
          padding: 0px 16px;
          display: flex;
          align-items: center;
        "
      >
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            align-items: center;
          "
        >
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <menu-fold-outlined
            v-else
            class="trigger"
            @click="() => (collapsed = !collapsed)"
          />
          <a-dropdown>
            <a-avatar
              :src="
                userStore.userInfo.avatar ||
                'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png'
              "
              size="large"
            />
            <template #overlay>
              <a-menu @click="onClick">
                <a-menu-item key="1">用户中心</a-menu-item>
                <a-menu-item key="3">修改密码</a-menu-item>
                <a-menu-item key="2">退出登录</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>
      <a-layout-content
        :style="{
          margin: '24px 16px',
          padding: '24px',
          background: '#fff',
          minHeight: '280px',
          overflow: 'auto',
          scrollbarWidth: 'none',
          height: 'calc(100vh - 160px)',
          borderRadius: '12px' /* 增大圆角 */,
          boxShadow: '0 2px 12px rgba(0, 0, 0, 0.06)' /* 添加阴影 */,
        }"
      >
        <RouterView />
      </a-layout-content>
    </a-layout>
  </a-layout>
  <a-modal v-model:visible="visible" title="修改密码" @ok="handleOk">
    <a-form :model="formData" :rules="rules" ref="formRef">
      <a-form-item
        label="旧密码"
        :rules="[{ required: true, message: '请输入旧密码' }]"
      >
        <a-input
          v-model:value="formData.oldPassword"
          placeholder="请输入旧密码"
        />
      </a-form-item>
      <a-form-item
        label="新密码"
        :rules="[{ required: true, message: '请输入新密码' }]"
      >
        <a-input
          v-model:value="formData.newPassword"
          placeholder="请输入新密码"
        />
      </a-form-item>
      <a-form-item
        label="确认密码"
        :rules="[{ required: true, message: '请确认新密码' }]"
      >
        <a-input
          v-model:value="formData.confirmPassword"
          placeholder="请确认新密码"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { ref, onMounted } from "vue";
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from "@ant-design/icons-vue";
import Menu from "@/components/Menu.vue";
import { RouterView } from "vue-router";
import { useRouter } from "vue-router";
const router = useRouter();
import { useUserStore } from "../store/module/user";
const userStore = useUserStore();

//选择菜单项
const selectedKeys = ref(["home"]);
//是否折叠
const collapsed = ref(false);
//菜单列表
const menuList = ref([]);

const handleSelect = (key) => {
  // console.log(key.key);
  selectedKeys.value = key.keyPath;
  userStore.menuKeys = key.keyPath;
};

const onClick = ({ key }) => {
  console.log(key);
  if (key === "2") {
    userStore.clearUserInfo();
    userStore.menuKeys = ["home"];
    router.push("/login");
  }
  if (key === "1") {
    router.push("/user");
    selectedKeys.value = ["user"];
    userStore.menuKeys = ["user"];
  }
  if (key === "3") {
    visible.value = true;
  }
};

const visible = ref(false);

const formData = {
  oldPassword: "",
  newPassword: "",
  confirmPassword: "",
};
const rules = {
  oldPassword: [{ required: true, message: "请输入旧密码" }],
  newPassword: [{ required: true, message: "请输入新密码" }],
  confirmPassword: [{ required: true, message: "请确认新密码" }],
};
const formRef = ref(null);
const handleOk = (e) => {
  console.log(e);
  e.preventDefault();
  if (formData.newPassword !== formData.confirmPassword) {
    message.error("两次密码不一致");
    return;
  }
  formRef.value.validate().then((valid) => {
    if (valid) {
      console.log(111);
      
    } 
  });
  visible.value = false;
};

onMounted(() => {
  menuList.value = router.options.routes[0].children;
  selectedKeys.value = userStore.menuKeys;
  // console.log(menuList.value);
});
</script>

<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 36px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

.logo {
  height: 64px;
  /* background: rgba(255, 255, 255, 0.3); */
  margin: 16px 16px 5px 16px;
  background-image: url("@/assets/image/logo.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.site-layout .site-layout-background {
  background: #fff;
}

/* 新增滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 优化菜单样式 */
.ant-layout-sider {
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.05);
  z-index: 10;
}

/* 优化头部样式 */
.ant-layout-header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 10;
}

/* 优化卡片悬停效果 */
.ant-card {
  transition: all 0.3s ease;
}

.ant-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
</style>
